import React from 'react'
import Code from './Code'
import TitleBar from '../ui-components/titleBar'
import Tabs from '../ui-components/tabs'
import style from './style'
import styleTab from './style.tab'
import cx from 'classnames'
import util from '../util'

export default 
class extends React.Component {

  constructor(props) {
    super(props)
    const { team, org } = props.location.query
    if (team !== undefined) {
      this.state = {
        index: 2
      }
    } else if (org !== undefined) {
      this.state = {
        index: 3
      }
    } else {
      this.state = {
        index: 1
      }
    }
  }

  componentWillReceiveProps(props) {
    if (!util.isShallowEqual(props.location.query, this.props.location.query)) {
      this.fetch(props)
    }
  }

  componentDidMount() {
    this.fetch()
  }

  fetch(props) {
    const { team, org } = (props || this.props).location.query

    if (team !== undefined) {
      this.setState({
        data: '团队数据'
      })
    } else if (org !== undefined) {
      this.setState({
        data: '公司数据'
      })
    } else {
      this.setState({
        data: '个人数据'
      })
    }
  }

  handleChange(index) {
    this.setState({ index })
    if (index == 2) {
      this.props.router.push('/tabs?team')
    } else if (index == 1) {
      this.props.router.push('/tabs')
    } else if (index == 3) {
      this.props.router.push('/tabs?org')
    }
  }

  render() {
    return (
      <div className={cx({
        [style.root]: true
      })}>
        <Code>{'<Tabs tabs={[ ... ]} top onChange={} index=""/>'}</Code>
        <div style={{ width: '900px'}}>
          <TitleBar 
            label='带导航的标题'
          />
        </div>
        <div style={{ marginTop: '-2px' }}>
          <Tabs 
            top
            index={this.state.index}
            onChange={::this.handleChange}
            tabs={[
              {
                label: '我的目标',
              },
              {
                label: '团队目标',
              },
              {
                label: '公司'
              }
            ]}
          />
        </div>
        <div className={styleTab.data}>
          <p>{ this.state.data || '' }</p>
        </div>
      </div>
    )
  }
}
